<template>
	<view class="">
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(40) + 'px' }"
			v-show="!hiddenModel">
			<text>活动专区</text>
		</view>

		<view class="doy-pay-index">

			<u-navbar :is-back="false">
				<view class="v-return flex-align-center" @click="toRe()" :style="{ top: customBar*5 + 'px' }"
					v-if="customBar">

					<view class="tabSwitch flex-between">
						<view v-for="(item,index) in tabSwitchList" :key="index" @click.stop="tabSwitchCk(index)">
							<view :class="currentIndex == index ? 'activeBtn flex' : 'transitionBtn flex'"
								:style="{ color: currentIndex == item.id ? '#FF511F' : '#fff' }">
								{{ item.tabName }}
							</view>
						</view>
					</view>
				</view>
			</u-navbar>

			<view class="top-card padding_20rpx_0"
				:style="{ '--bg-image': `url(${ currentIndex==0? activitySetObj.groupon_pic:currentIndex==1?  activitySetObj.seckill_pic: activitySetObj.bargains_pic})` }">

				<view class="seckillTimer flex" v-if=" currentIndex==1" style="width: 400rpx;">
					<view class="joinGroupBtn ">
						<text class="font-size_26rpx" style="color: #fff;">超低价秒杀，先到先得抓紧抢购</text>
					</view>


				</view>



			</view>
			<view class="v-content">
				<sunui-navbar activeFontWeight="900" :items="tabList" :currentIndex="navIndex" padding="20rpx"
					:size="220" activeFontSize="30rpx" fontSize="30rpx" activeLineWidth="50%" activeLineBg="#D83734"
					textAlign="center" activeDirection="center" activeLineHeight="8rpx" activeColor="#D83734"
					:isCenter="true" @change="e=>getChange(e,tabList[e].id)"></sunui-navbar>
				<view class="" style="height: 30rpx;">

				</view>
				<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" :down="downOption"
					@down="downCallback" @up="upCallback">
					<view class="dailyFlashSaleList flex-columns ">

						<view v-for="(item,index) in grouponsList" :key="index">
							<view
								style="margin-bottom: 20rpx;border-radius: 20rpx; background-color: #fff;padding: 15rpx ;">
								<view class="flex-around"
									style="border-radius: 20rpx; background-color: #fff;padding: 8rpx 0;">
									<image class="dailyFlashSaleImg" style="margin-right: 20rpx; " :src="item.pic_url"
										mode="aspectFit">
									</image>
									<view class="" style="height: 237rpx;">
										<view style="" class=" flex-start-center">
											<text class="font-overflow"
												:style="{width: currentIndex== 0?'341rpx':'444rpx'}"
												style="font-weight: 700;">{{item.goods_name}}</text>

											<view class="joinGroupBtn flex margin-left_16rpx" v-if="currentIndex==0">
												<text class="font-size_24rpx">{{item.max_number}}人团</text>
											</view>
										</view>
										<view style="color: #EF3C2E; font-size: 24rpx;" class="margin-top_10rpx"
											v-if="currentIndex==2&&item.order_id!=0 ">
											已砍<text
												class="font-weight_bold">{{((Number(item.price)- Number(item.order_money))>(Number(item.price)- Number(item.money))?(Number(item.price)- Number(item.money)):(Number(item.price)- Number(item.order_money))).toFixed(2)}}</text>元，仅差<text
												style="color:#FF0000 ;"
												class="font-weight_bold">{{(((Number(item.order_money)- Number(item.money))<0)?(Number(0)):(Number(item.order_money)- Number(item.money))).toFixed(2)}}</text>元
										</view>

										<view style="color: #EF3C2E; font-size: 24rpx;" class="margin-top_10rpx"
											v-if="currentIndex==2&&item.order_id==0 ">
											已砍<text class="font-weight_bold">0</text>元，仅差<text style="color:#FF0000 ;"
												class="font-weight_bold">{{Number(item.price)- Number(item.money)}}</text>元
										</view>



										<view style="color: #EF3C2E;" class="margin-top_10rpx"
											v-if="currentIndex==2 &&(item.order_money==item.money)">
											砍价成功·请立即支付
										</view>
										<view class="margin-top_50rpx" style="height: 137rpx;" v-if="currentIndex==2">

											<view style="height: 100rpx;"
												class="seckillRob  flex-betweens margin-top_10rpx">


												<view class="flex-columns" style="padding-left: 15rpx;">

													<view style="color: #EF3C2E ;" class="font-size_22rpx "
														v-if="(item.order_id==0)">
														最低砍至￥{{item.money}}(元)
													</view>

													<cc-countdown v-if="(item.order_id!=0)&&item.order_status!=1"
														style="margin-left: 10rpx;" color="#FFF"
														background-color="#ef3c2e" splitorColor="red" :showColon="true"
														:showDay="true" :day="item.activeTimeing.days"
														:hour="item.activeTimeing.hours"
														:minute="item.activeTimeing.minutes"
														:second="item.activeTimeing.seconds"
														@timeup="timeup"></cc-countdown>
													<cc-countdown v-if="item.order_status==1"
														style="margin-left: 10rpx;" color="#FFF"
														background-color="#ef3c2e" splitorColor="red" :showColon="true"
														:showDay="true" :day="item.timeOrderEnd.days"
														:hour="item.timeOrderEnd.hours"
														:minute="item.timeOrderEnd.minutes"
														:second="item.timeOrderEnd.seconds"
														@timeup="timeup"></cc-countdown>
													<view class=""
														style=" text-decoration: line-through; color: #919090;"
														class=" font-size_24rpx  margin-top_10rpx">
														原价:￥{{item.price}}
													</view>

												</view>


												<view class="initerBtn" @click="joinActivities(3,item.id)">
													<image class="initerImg" src="/static/组合 2945.png" mode="aspectFit">
													</image>

													<view class="initerTexts flex-column" v-if="(item.order_status==1)">
														<view style="color: #fff;" class="font-size_24rpx">
															￥{{ Number(item.order_money)}}
														</view>
														<view style="color: #fff;" class="font-size_24rpx">
															立即支付
														</view>

													</view>
													
													<view class="initerText" v-else-if="(navIndex==2)">
														已经结束
													</view>
													<view class="initerText" v-else-if="(item.order_status==2)">
														继续邀请
													</view>
													<view class="initerText" v-else-if="(item.order_status!=2)">
														立即参与
													</view>




												</view>
											</view>
										</view>



										<view class="">
											<view class="flex-between margin-top_10rpx" v-if=" currentIndex==1">
												<view class="" style="width: 200rpx;">
													<ai-progress v-if="item" :percentage="Number(item.inventory)"
														:is-animate="true"
														:totalNum="Number(Number(item.inventory)+Number(item.sold))"
														duration="3000"></ai-progress>



												</view>
												<cc-countdown style="margin-left: 5rpx;" color="#FFF"
													background-color="#ef3c2e" splitorColor="red" :showColon="true"
													:showDay="true" :day="item.activeTimeing.days"
													:hour="item.activeTimeing.hours"
													:minute="item.activeTimeing.minutes"
													:second="item.activeTimeing.seconds"
													@timeup="timeup"></cc-countdown>
											</view>



											<view class="flex-start-center margin-top_20rpx" v-if=" currentIndex==0">
												<text
													style="color: #EF3C2E;margin-right: 10rpx;">{{navIndex==1?'开始时间':'进行中'}}</text><cc-countdown
													style="margin-left: 5rpx;" color="#FFF" background-color="#ef3c2e"
													splitorColor="red" :showColon="true" :showDay="true"
													:day="item.activeTimeing.days" :hour="item.activeTimeing.hours"
													:minute="item.activeTimeing.minutes"
													:second="item.activeTimeing.seconds"
													@timeup="timeup"></cc-countdown>
											</view>

											<view class="flex-columns   margin-top_10rpx" style="height: 135rpx;"
												v-if="currentIndex==1">
												<view class="borderRed flex" v-if=" item.num==1">
													同一个人只能参与活动一次
												</view>
												<view class="" v-else>
													<view class="font-size_26rpx" style="width: 300rpx;">
														剩余名额:{{item.inventory}}位 </view>
												</view>
												<view class="seckillRob flex-betweens">
													<view class="flex-start-center  ">
														<view style="color: #EF3C2E ;"
															class="font-size_28rpx font-weight">
															￥{{item.money?item.money:item.order_money}}(元)
														</view>
														<image class="imgShrare margin-left_16rpx"
															src="../../static/my/组合 3056.png" mode=""></image>
														<text
															style="color: #EF3C2E ;font-weight: 400;margin-left: 5rpx;"
															class="font-size_22rpx ">降￥{{Number(item.price)-Number(item.money)}}</text>
													</view>

													<view class="registrationBtn flex" v-if="navIndex==0"
														@click="joinActivities(2,item.id)">
														抢
													</view>
													<view class="registrationBtnNo flex" v-if="navIndex==1">
														抢
													</view>
													<view class="registrationBtnNo flex"  v-if="navIndex==2">
														抢
													</view>
												</view>

											</view>
											<view class="margin-top_50rpx " v-if="currentIndex==0">
												<view style="color:#EF3C2E; margin-top: 20rpx;"
													class="font-weight  flex-start-center">
													团购价:￥{{item.order_money}}
												</view>
												<view
													style="color:#FF13006E;  text-decoration: line-through; margin-top: 5rpx;"
													class=" font-size_24rpx  flex-start-center">
													原价:￥{{item.price}}
												</view>
											</view>


										</view>





									</view>

								</view>
								<view class="rob  flex-betweens margin-top_10rpx" v-if="currentIndex==0">
									<view class="flex-start-center margin-left_20rpx">
										<view class="flex-start-center">
											<view class="flex-between v-p-share">
												<view class="v-m-width not-font-overflow flex1" v-if="item.imgList">
													<block v-for="(img, index) in item.imgList" :key="index">
														<image v-if="index<5" class="pt_img" :src="img"></image>
													</block>

												</view>
												<view class="v-m-width not-font-overflow flex1" v-else>
													<block v-for="(img, index) in item.imgLists" :key="index">
														<image v-if="index<5" class="pt_img" :src="img"></image>
													</block>

												</view>

											</view>


										</view>
										<text class="font-size_24rpx">已有{{item.sold}}人参加团购</text>
									</view>
									<view class="" v-if="navIndex==0">
										<view class="registrationBtn flex"
											v-if="item.entry_fee=='0.00'&&!item.order_status"
											@click="joinActivities(1,item.id)">
											免费报名
										</view>
										<view class="registrationBtn flex-column"
											v-else-if="item.order_status==2||item.order_status==1"
											@click="joinActivities(1,item.id)">

											<view class="" style="color: #fff;">
												继续邀请
											</view>
										</view>
										<view class="registrationBtn flex-column" v-else
											@click="joinActivities(1,item.id)">
											<view class="" style="color: #fff;">
												￥{{item.entry_fee}}
											</view>
											<view class="" style="color: #fff;">
												报名费
											</view>
										</view>
									</view>
									<view class="" v-if="navIndex==1">
										<view class="registrationBtnNO flex" v-if="item.entry_fee=='0.00'">
											免费报名
										</view>
										<view class="registrationBtnNO flex-column" v-else>
											<view class="" style="color: #fff;">
												￥{{item.entry_fee}}
											</view>
											<view class="" style="color: #fff;">
												报名费
											</view>
										</view>
									</view>
									<view class="" v-if="navIndex==2" >
										<view class="registrationBtnNO flex">
											已结束
										</view>

									</view>


								</view>
							</view>
						</view>
					</view>
				</mescroll-body>
				<view class="height50">

				</view>

			</view>





		</view>

		<sunui-tabbar :fixed="true" :current="1"></sunui-tabbar>
	</view>
</template>

<script>
	import aiProgress from '@/components/ai-progress/ai-progress.vue'
	export default {
		components: {
			aiProgress
		},
		data() {

			return {

				value: 1,
				heightSystemss: 0,
				hiddenModel: true, //显示影藏
				opacityStyle: 0,
				uid: uni.getStorageSync('uid'),
				imgList: [

				],
				imgLists: [
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
				],
				tabSwitchList: [{
						id: 0,
						tabName: '团购'

					},
					{
						id: 1,
						tabName: '秒杀'

					},
					{
						id: 2,
						tabName: '砍价'

					}
				],
				currentIndex: 0,
				customBar: 0,

				navIndex: 0,
				TouchtouchRectangle: this.$imgs.groupBuying,
				haibaoBanner: this.$imgs.flashSaleposter,
				pintuanBanner: this.$imgs.bargainPoster,
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				tabList: [{
						name: '进行中',
						id: 2
					},
					{
						name: '未开始',
						id: 1
					},

					{
						name: '已结束',
						id: 3
					}
				],
				grouponsList: [],
				seckillList: [],
				isStatus: 2,
				activitySetObj: {},
				windowHeight: 0,
				brokerageSetObj: {},


			}
		},
		computed: {
			totelName: function() {
				return function(num) {
					console.log(num);
					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			}
		},
		onPageScroll(ev) {
		
		
			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140
		
				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();
		
			} else {
				this.hiddenModel = true
			}
		},
		onLoad() {
			this.createdgetSystemInfo();
			this.activitySetFn()
			// this.randomUserFn()
			// console.log(this.formatTimeDifferenceing(1744872297))
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight - 600;
				}
			});

		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		methods: {
			createdgetSystemInfo() {
				uni.getSystemInfo({
					success: e => {
						// 文章网址：https://blog.csdn.net/weixin_44510655/article/details/127131947
						this.heightSystemss = e.statusBarHeight;
						const custom = wx.getMenuButtonBoundingClientRect();
						this.customBar = ((custom.top - e.statusBarHeight) * 2 + custom.height) / 4

						console.log(this.customBar)
					}
				});
			},
			async brokerageSetFn() {
				const result = await this.$http.get({
					url: this.$api.brokerageSet,
					data: {


					}
				});
				if (result.errno == 0) {



					this.brokerageSetObj = result.data
					uni.setStorageSync('brokerageSet', result.data);
				}
			},
			change(e) {
				console.log(e)
				if (e == 0) {
					this.$sun.navSwitch('/pages/index/index')
				} else if (e == 2) {
					this.$sun.navSwitch('/pages/partnerPromotion/promotionCenter')
				} else if (e == 3) {
					this.$sun.navSwitch('/pages/mine/mine')
				}
			},

			async randomUserFn(sold) {
				if(sold){
					const result = await this.$http.get({
						url: this.$api.randomUser,
						data: {
							psize: sold
					
					
						}
					});
					if (result.errno == 0) {
					
						console.log(result.data)
						this.imgList = result.data
					
						return this.imgList;
					
					}
				}

			},
			handleLogin() {
				if (this.uid) {
					return true;
				} else {
					uni.navigateTo({
						url: `/pages/login/login`
					});
				}
			},
			timeup() {
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})
			},
			async activitySetFn() {
				const result = await this.$http.get({
					url: this.$api.activitySet,
					data: {



					}
				});
				if (result.errno == 0) {

					console.log(result.data)
					this.activitySetObj = result.data


				}
			},
			onShareAppMessage(res) {
				console.log(res)
				if (res.from === 'button') {
					// 来自页面内分享按钮
					// this.addShare();

				}
				return {
					// 自定义分享标题
					title: this.activitySetObj.share_title ? this.activitySetObj.share_title : wx.getStorageSync('system')
						.share_title,
					imageUrl: this.activitySetObj.share_pic ? this.activitySetObj.share_pic : wx.getStorageSync('system')
						.share_pic,
					desc: this.activitySetObj.share_desc ? this.activitySetObj.share_desc : wx.getStorageSync('system')
						.share_desc,

					path: '/pages/index/index?pid=' + uni.getStorageSync("uid") ? uni.getStorageSync("uid") : ''
				};

			},
			joinActivities(index, id) {
				if (this.handleLogin()) {
					this.$sun.navGo('/pages/detail/detail', {
						goods_id: id,
						type: index
					});
				}

			},
			// signUpCk() {
			// 	this.$sun.toast('报名')
			// },
			tabSwitchCk(index) {

				this.currentIndex = index
				this.isStatus = 2
				this.navIndex = 0
				this.mescroll.resetUpScroll();
				console.log(this.currentIndex)
			},
			createdgetSystemInfo() {
				uni.getSystemInfo({
					success: e => {
						// 文章网址：https://blog.csdn.net/weixin_44510655/article/details/127131947
						this.heightSystemss = e.statusBarHeight;
						const custom = wx.getMenuButtonBoundingClientRect();
						this.customBar = ((custom.top - e.statusBarHeight) * 2 + custom.height) / 4;
						console.log(this.customBar, '=========')
					}
				});
			},
			getChange(e, is_status) {
				console.log(e, is_status)
				this.navIndex = e;
				this.isStatus = is_status
				this.mescroll.resetUpScroll();
			},
			// 开始还有多久
			formatTimeDifferenceing(timestamp) {
				// 获取当前时间的时间戳（以秒为单位）
				const currentTimestamp = Math.floor(Date.now() / 1000);

				// 计算时间差（以秒为单位）
				let timeDifference = timestamp - currentTimestamp;

				// 如果时间差是负数，表示目标时间已经过去，返回0
				if (timeDifference < 0) {
					return {
						days: '00',
						hours: '00',
						minutes: '00',
						seconds: '00'
					};
				}

				// 计算天数
				const days = Math.floor(timeDifference / (24 * 60 * 60));
				timeDifference %= (24 * 60 * 60);

				// 计算小时
				const hours = Math.floor(timeDifference / (60 * 60));
				timeDifference %= (60 * 60);

				// 计算分钟
				const minutes = Math.floor(timeDifference / 60);

				// 剩余的秒数
				const seconds = timeDifference % 60;
				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				};

			},
			// 还有多久结束
			formatTimeDifference(timestamp) {
				// 获取当前时间的时间戳（以秒为单位）
				const currentTimestamp = Math.floor(Date.now() / 1000);

				// 计算时间差（以秒为单位）
				let timeDifference = timestamp - currentTimestamp;

				// 计算天数
				const days = Math.floor(timeDifference / (24 * 60 * 60));
				timeDifference %= (24 * 60 * 60);

				// 计算小时
				const hours = Math.floor(timeDifference / (60 * 60));
				timeDifference %= (60 * 60);

				// 计算分钟
				const minutes = Math.floor(timeDifference / 60);

				// 剩余的秒数
				const seconds = timeDifference % 60;

				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				};
			},
			formatTimeDifferenceOrder(timestamp) {
				// 获取当前时间的时间戳（以秒为单位）
				const currentTimestamp = Math.floor(Date.now() / 1000);

				// 计算时间差（以秒为单位）
				let timeDifference = timestamp - currentTimestamp;

				// 如果时间差是负数，表示目标时间已经过去，返回0
				if (timeDifference < 0) {
					return {
						days: '00',
						hours: '00',
						minutes: '00',
						seconds: '00',

					};
				}

				// 计算天数
				const days = Math.floor(timeDifference / (24 * 60 * 60));
				timeDifference %= (24 * 60 * 60);

				// 计算小时
				const hours = Math.floor(timeDifference / (60 * 60));
				timeDifference %= (60 * 60);

				// 计算分钟
				const minutes = Math.floor(timeDifference / 60);

				// 剩余的秒数
				const seconds = timeDifference % 60;

				// 返回格式化后的时间差
				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds,

				};
			},
			async upCallback(scroll) {
				let tabActivity = this.currentIndex == 0 ? this.$api.grouponGoodsList : this.currentIndex == 1 ? this
					.$api.seckillGoodsList : this.$api
					.bargainsGoodsList
				const result = await this.$http.post({
					url: tabActivity,
					data: {
						is_status: this.isStatus,
						uid: uni.getStorageSync('uid'),
						page: scroll.num,
						psize: 10,

					}
				});
				if (result.errno == 0) {
					for (const item of result.data.list) {

						if (this.navIndex == 1) {


							item.activeTimeing = this.formatTimeDifferenceing(item.start_time)
							console.log(item.activeTimeing)
						} else {
							item.activeTimeing = this.formatTimeDifference(item.end_time)
							item.timeOrderEnd = this.formatTimeDifferenceOrder(item.order_end)
						}
						item.imgList = await this.randomUserFn(item.sold>5?5:item.sold);
					}




					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.grouponsList = [];
					this.grouponsList = this.grouponsList.concat(result.data.list);


					console.log(this.grouponsList)



					// if (this.currentIndex == 0) {
					// 	this.mescroll.endByPage(result.data.list.length, result.totalPage);
					// 	if (scroll.num == 1) this.grouponsList = [];
					// 	this.grouponsList = this.grouponsList.concat(result.data.list);

					// 	this.grouponsList.forEach((item)=>{

					// 	  item.activeTimeing=this.formatTimeDifference(item.end_time)
					// 	});

					// 	console.log(this.grouponsList)
					// } else if (this.currentIndex == 1) {
					// 	this.mescroll.endByPage(result.data.list.length, result.totalPage);
					// 	if (scroll.num == 1) this.seckillList = [];
					// 	this.seckillList = this.seckillList.concat(result.data.list);
					// } else {
					// 	this.mescroll.endByPage(result.data.list.length, result.totalPage);
					// 	if (scroll.num == 1) this.typeList = [];
					// 	this.typeList = this.typeList.concat(result.data.list);
					// }

				}
			},






		}
	}
</script>

<style lang="less">
	#barTitle {
		position: fixed;
		width: 750rpx;
		top: 0;
		left: 0;
		background: #fff;
		color: #000000;
		text-align: center;
		font-weight: bold;
		z-index: 9999
	}
	
	#barTitle>text {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20rpx
	}
	/deep/ .uv-tabbar--fixed {
		z-index: 9999 !important;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
	}

	.doy-pay-index {
		width: 100vw !important;
		height: 100vh !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;

		.tabSwitch {
			width: 348rpx;
			height: 68rpx;
			border-radius: 176rpx;

			background: rgba(197, 79, 26, 0.48);

			.activeBtn {
				width: 116rpx;
				height: 68rpx;
				border-radius: 158rpx;

				background: rgb(255, 255, 255);
			}

			.transitionBtn {
				width: 116rpx;
				height: 68rpx;
				border-radius: 158rpx;

				// background: rgb(255, 255, 255);
			}
		}

		.v-return {
			margin-left: 30rpx;
			position: absolute;
			display: flex;
			align-items: center;
			// background-color: #fff;
			// position: fixed;
			// width: 100%;
			// padding:0 30rpx;
			z-index: 999;
			color: #fff;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 32rpx;
			}
		}

		.containerList {
			margin-left: 20rpx;
			width: 712rpx;
			height: 160rpx;
			border-radius: 20rpx;

			background: rgb(255, 255, 255);
			padding: 20rpx;

			.imgList {
				width: 72rpx;
				height: 72rpx;
				border-radius: 72rpx;

			}

			.linkImg {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.top-card {
			background-image: (var(--bg-image));
			background-repeat: no-repeat;
			background-size: contain;
			position: relative;
			height: 466rpx;

			.seckillTimer {
				position: absolute;
				top: 72%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.top-border {
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.06);
			}

			.top-num {
				width: calc(100% / 3);
				padding: 30rpx 0 28rpx;

				text {
					font-size: 32rpx;
					font-weight: 500;
					color: rgb(255, 255, 255);
				}

				view {
					font-size: 24rpx;
					color: rgb(219, 225, 255);
					margin-top: 6rpx;
				}
			}

			.top-all-num {
				padding: 28rpx 0 60rpx;
				width: calc(100% / 3);

				image {
					border-radius: 100rpx;
					width: 52rpx;
					height: 52rpx;
				}

				.all-cls {
					text {
						color: rgb(255, 255, 255);
						font-size: 24rpx;
					}

					view {
						color: rgb(255, 255, 255);
						font-size: 32rpx;
						padding: 12rpx 0 10rpx;
						font-weight: 600;
					}
				}
			}
		}

		.v-content {
			border-radius: 40rpx 40rpx 0 0;
			position: absolute;
			width: 100%;


			background: linear-gradient(180.00deg, rgb(245, 233, 228) 1.311%, #fff9f9, 30.317%, rgba(255, 255, 255, 0) 11.557%);
			height: 500rpx;
			// background-color: #fff;
			z-index: 10;
			margin-top: -40rpx;
			padding: 36rpx 20rpx;

			.dailyFlashSaleList {

				.borderRed {
					width: 66%;
					margin-top: 10rpx;
					font-size: 20rpx;
					padding: 8rpx;
					color: #EF3C2E;
					border: 2rpx solid #EF3C2E;
					border-radius: 136rpx;
				}

				.activeBtn {
					color: #fff;
					width: 128rpx;
					height: 60rpx;
					border-radius: 136rpx;

					background: rgb(239, 60, 46);
				}

				.joinGroupBtn {
					border-radius: 12rpx;
					color: #fff;
					background: rgb(239, 60, 46);
					width: 90rpx;
					height: 45rpx;
				}

				.dailyFlashSaleImg {

					width: 217rpx;
					height: 217rpx;
					border-radius: 20rpx;

				}

				.economize {
					/* 矩形 1707 */

					padding: 5rpx 8rpx 5rpx 5rpx;


					box-sizing: content-box;
					border: 2rpx solid rgb(253, 31, 43);
					border-radius: 20rpx 40rpx 40rpx 0rpx;

					background: rgb(255, 244, 242);
					margin-right: 10rpx;
				}

				.imgShrare {
					width: 14.42rpx;
					height: 19.98rpx;
				}

				.seckillRob {
					// width: 678rpx;
					height: 62rpx;
					border-radius: 20rpx;

					background: rgb(255, 244, 242);
					position: relative;

					.initerBtn {
						position: absolute;
						right: 65rpx;
						top: 6rpx;

						.initerText {
							color: #fff;
							position: relative;
							z-index: 999;
							right: -40rpx;
							top: 25rpx;
							font-size: 24rpx;
						}

						.initerTexts {
							color: #fff;
							position: relative;
							z-index: 999;
							right: -32rpx;
							top: 11rpx;
							font-size: 24rpx;
						}

						.initerImg {
							width: 162.06rpx;
							height: 82rpx;
							position: absolute;
						}
					}

					.registrationBtn {
						width: 102rpx;
						height: 68rpx;
						border-radius: 20rpx;
						color: #fff;
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						background: rgb(239, 60, 46);
					}

					.registrationBtnNo {
						width: 102rpx;
						height: 68rpx;
						border-radius: 20rpx;
						color: #fff;
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						background: #D5D5D5;
					}

				}

				.rob {
					width: 678rpx;
					height: 82rpx;
					border-radius: 20rpx;

					background: rgb(255, 244, 242);

					.registrationBtn {
						width: 218rpx;
						height: 82rpx;
						border-radius: 60rpx 20rpx 20rpx 0rpx;
						color: #fff;
						background: linear-gradient(71.22deg, rgb(244, 106, 26) 1.012%, rgb(239, 60, 46) 97.977%);
					}

					.registrationBtnNO {
						width: 218rpx;
						height: 82rpx;
						border-radius: 60rpx 20rpx 20rpx 0rpx;
						color: #fff;
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						background: #D5D5D5;
					}

					.v-p-share {
						padding: 2rpx 2rpx 0 2rpx;

						.v-m-width {
							margin-right: 40rpx;

							.pt_img {
								width: 50rpx;
								height: 50rpx;
								margin-right: -25rpx;
								border-radius: 50%;
							}
						}

						.v-share-friend {
							text {
								color: #294d7d;
								font-size: 24rpx;
								padding-right: 50rpx;
							}

							view {
								color: #ffffff;
								width: 154rpx;
								height: 58rpx;
							}
						}

						.v-share-friend2 {
							text {
								color: #294d7d;
								font-size: 24rpx;
							}
						}
					}
				}


			}

			.char-padding {
				padding-bottom: 50rpx;

				.v-title {
					padding-bottom: 10rpx;

					text {
						background: rgb(75, 135, 254);
						width: 6rpx;
						height: 24rpx;
					}

					view {
						margin-left: 20rpx;
						color: rgb(51, 51, 51);
						font-size: 32rpx;
						font-weight: 700;
					}
				}

				.v-card2 {
					margin: 14rpx 0 -30rpx;
				}

				.v-card {
					margin: 14rpx 0 40rpx;
				}

				.v-card,
				.v-card2 {
					padding: 20rpx;
					border-radius: 20rpx;
					background: rgb(245, 248, 255);

					.transaction-cls {
						width: calc(100% / 3);

						text {
							color: rgb(153, 153, 153);
							font-size: 24rpx;
						}

						view {
							padding-top: 10rpx;
							color: rgb(51, 51, 51);
							font-size: 32rpx;
							font-weight: 700;
						}
					}
				}
			}
		}



		.label {
			background-color: #ECECEC;
			color: #A1A1A1;
			border-radius: 10rpx;
			padding: 8rpx 16rpx;
			display: inline-block;
			margin-left: 20rpx;
		}

		.matrix-4 {
			width: 24rpx;
			height: 24rpx;
			margin-left: 6rpx;
			margin-right: 20rpx;
		}
	}
</style>